import React, { Component } from 'react'
import { Menu } from 'antd'
import { Link, withRouter } from 'react-router-dom'
import store from '../store/index'


const { SubMenu } = Menu;

class MenuComponent extends Component {
    constructor(props) {
        super(props)
        console.log(store.getState())
        const menuList = JSON.parse(localStorage.getItem('menuList'))
        if (!menuList) {
            this.props.history.replace('/login')
        }
        this.state = {
            currentMenu: localStorage.getItem('current-menu') || 'main/home',
            menuList: menuList || []
        }

        store.subscribe(() => {
            this.setState({
                menuList: store.getState().indexReducer.menuList
            })
            console.log("state change", this.state.menuList);
        });
    }


    handleClick = e => {
        this.setState({
            currentMenu: e.key,
        });
        localStorage.setItem('current-menu', e.key)
    };

    render() {
        const { menuList } = this.state;
        return (
            <div>
                <Menu className="dz-menu"
                    selectedKeys={[this.state.currentMenu]}
                    mode="inline"
                    theme="dark"
                    onClick={this.handleClick}
                    style={{ width: 150, height: 'calc(100vh - 60px)', overflowY: 'scroll' }}
                >
                    {
                        menuList.map(item => {
                            return (
                                item.children.length
                                    ?
                                    <SubMenu
                                        key={item.menuKey}
                                        title={
                                            <span className="submenu-title-wrapper"><b>{item.menuName}</b></span>
                                        }
                                    >
                                        {
                                            item.children.map(child => {
                                                return (
                                                    <Menu.Item key={child.menuKey}><Link to={child.menuUrl}><b>{child.menuName}</b></Link></Menu.Item>
                                                )
                                            })
                                        }
                                    </SubMenu>
                                    :
                                    <Menu.Item key={item.menuKey}><Link to={item.menuUrl}><b>{item.menuName}</b></Link></Menu.Item>
                            )
                        })
                    }
                </Menu>
            </div>

        );
    }

    UNSAFE_componentWillMount() {
        const { pathname } = this.props.location
        const pathParams = pathname.split('/')
        localStorage.setItem('current-menu', pathParams.pop())
    }

}

export default withRouter(MenuComponent)